<template>
  <div>
    <el-form 
        :rules="rules" 
        ref="loginForm" 
        :model="loginForm" 
        class="loginContainer"
        v-loading="loading"
        element-loading-text="正在登录..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        <h3 class="loginTitle">系统登录</h3>
        <el-form-item prop="username">
            <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码"></el-input>                 
        </el-form-item>
        <el-form-item prop="code">
            <el-input style="width:250px; margin-right:5px" type="text"  auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码"></el-input>
            <img :src="captchaUrl" @click="updateCaptcha">
        </el-form-item>
        <el-checkbox v-model="checked" class="rememberMe">记住我</el-checkbox>               
        <el-button type="primary" style="width:100%" @click="submitLogin">登录</el-button>


    </el-form>
  </div>
</template>

<script>
export default {
    name : "Login",
    data(){
        return {
            loading: false,
            checked: true,
            captchaUrl: "/captcha?time=" + new Date(),
            loginForm:{
                username: "admin",
                password: "123",
                code: ""
            },
            rules:{
                username: [{
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur"
                }],
                password: [{
                        required: true,
                        message: "请输入密码",
                        trigger: "blur"
                }],
                code: [{
                        required: true,
                        message: "请输入验证码",
                        trigger: "blur"
                }]
            }
        }
    },
    methods:{
        updateCaptcha(){
            this.captchaUrl = "/captcha?time=" + new Date();
        },
        submitLogin(){
            this.loading = true;
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.postRequest('/login', this.loginForm).then(resp => {
                        let tokenStr = resp.obj.tokenHead + resp.obj.token;
                        window.sessionStorage.setItem("tokenStr", tokenStr);
                        this.loading = true;
                        this.$router.replace('/home');
                    })
                } else {
                    this.$message.error("请输入所有字段！");
                    return false;
                }
            });
        }
    }
}
</script>

<style>
    .loginContainer{
        border-radius: 15px;
        border: 1px solid #eaeaea;
        margin: 180px auto;
        padding: 15px 35px 15px 35px; /* 上 右 下 左 */
        width: 350px;
        background: #fff;
        box-shadow: 0 0 25px #cac6c6;
        /* 调整背景则调整整个盒子，不只是内容的背景 */
        background-clip: padding-box; /* content-box */
    }
    .loginTitle{
        margin: 0px auto 48px auto; /* 上 右 下 左 */
        text-align: center;
    }
    .rememberMe{
        margin: 0 0 15px 0;
        text-align: left;
    }
    .el-form-item__content{
        display: flex;
        align-items: center;
    }
</style>